<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 520px;
            border: 1px solid #ccc;
        }

        #box th {
            width: 104px;
            border: 1px solid black;
        }

        #box tr {
            width: 520px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div id="app">
        <data-table />
        <edit-modal />
    </div>

    <script src="./vue.js"></script>
    <script>
        const { createApp, ref, reactive, computed, provide, inject } = Vue;

        // 数据管理的全局状态
        const useDataStore = () => {
            const state = reactive({
                search: '',
                listData: [
                    { id: 1, FirstName: "safsag", LastName: "vgsdf", Username: "dfhdf" },
                    { id: 2, FirstName: 53235, LastName: 35325, Username: 3523 },
                    { id: 3, FirstName: "fdhdf", LastName: 436, Username: "fdn46" },
                    { id: 4, FirstName: "fdh", LastName: 46, Username: "hfd" }
                ],
                editForm: {
                    id: null,
                    FirstName: '',
                    LastName: '',
                    Username: ''
                },
                editingIndex: -1,
                isModalVisible: false,
            });

            const filteredList = computed(() =>
                state.listData.filter(item =>
                    item.FirstName.toString().toLowerCase().includes(state.search.toLowerCase())
                )
            );

            const addItem = () => {
                const newId = Math.max(...state.listData.map(item => item.id)) + 1;
                const newFirstName = prompt('请输入 FirstName');
                const newLastName = prompt('请输入 LastName');
                const newUsername = prompt('请输入 Username');
                if (newFirstName && newLastName && newUsername) {
                    state.listData.push({
                        id: newId,
                        FirstName: newFirstName,
                        LastName: newLastName,
                        Username: newUsername
                    });
                }
            };

            const editItem = (index) => {
                state.editingIndex = index;
                const itemToEdit = state.listData[index];
                state.editForm = { ...itemToEdit };
                state.isModalVisible = true;
            };

            const del = (index) => {
                state.listData.splice(index, 1);
            };

            const handleSubmit = () => {
                if (state.editingIndex !== -1) {
                    state.listData[state.editingIndex] = { ...state.editForm };
                    state.editingIndex = -1;
                    state.isModalVisible = false;
                }
            };

            return {
                state,
                filteredList,
                addItem,
                editItem,
                del,
                handleSubmit
            };
        };

        // 表格组件
        const DataTable = {
            setup() {
                const { state, filteredList, addItem, editItem, del } = inject('dataStore');
                return { state, filteredList, addItem, editItem, del };
            },
            template: `
                <div>
                    <button @click="addItem">新增</button>
                    <span>搜索<input type="text" v-model="state.search" placeholder="请输入 FirstName"></span>
                    <hr>
                    <table id="box">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>FirstName</th>
                                <th>LastName</th>
                                <th>Username</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in filteredList" :key="item.id">
                                <td>{{ item.id }}</td>
                                <td>{{ item.FirstName }}</td>
                                <td>{{ item.LastName }}</td>
                                <td>{{ item.Username }}</td>
                                <td>
                                    <button @click="editItem(index)">编辑</button>
                                    <button @click="del(index)">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            `
        };

        // 编辑模态框组件
        const EditModal = {
            setup() {
                const { state, handleSubmit } = inject('dataStore');
                return { state, handleSubmit };
            },
            template: `
                <div v-if="state.isModalVisible" class="modal" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" @click="state.isModalVisible = false">&times;</button>
                                <h4 class="modal-title">信息</h4>
                            </div>
                            <div class="modal-body">
                                <form>
                                    <div class="form-group">
                                        <label>First Name</label>
                                        <input type="text" class="form-control" v-model="state.editForm.FirstName">
                                    </div>
                                    <div class="form-group">
                                        <label>Last Name</label>
                                        <input type="text" class="form-control" v-model="state.editForm.LastName">
                                    </div>
                                    <div class="form-group">
                                        <label>Username</label>
                                        <input type="text" class="form-control" v-model="state.editForm.Username">
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" @click="state.isModalVisible = false">取消</button>
                                <button type="button" class="btn btn-primary" @click="handleSubmit">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
            `
        };

        // 主应用实例
        createApp({
            setup() {
                provide('dataStore', useDataStore());
            },
            components: {
                DataTable,
                EditModal
            }
        }).mount("#app");
    </script>
</body>

</html>